<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI健康助手</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="ai_health.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1>AI健康助手</h1>
            <button class="report-btn">举报</button>
        </div>

        <!-- AI助手头部 -->
        <div class="ai-header">
            <div class="platform-info">
                
                <img src="https://picsum.photos/30/31" alt="医疗健康" class="ai-logo">
                <span>医疗健康</span>
            </div>
            <div class="controls">
                <button class="control-btn">
                    <i class="fas fa-volume-up"></i>
                </button>
                <button class="control-btn">
                    <span>中字</span>
                </button>
                <button class="control-btn">
                    <span>使用须知</span>
                </button>
            </div>
        </div>

        <!-- AI对话区域 -->
        <div class="chat-container">
            <!-- AI欢迎消息 -->
            <div class="ai-message">
                <div class="ai-avatar">
                    <img src="https://picsum.photos/60/60" alt="AI医生头像">
                </div>
                <div class="message-content">
                    <p>早呀，很高兴见到你~
我是由AI健康助手，为您提供专业的健康咨询服务。您可以告诉我一些关键词（如某医生、某药品、某症状等），我来为您答疑解惑！</p>
                </div>
            </div>

            <!-- 快捷问题区域 -->
            <div class="quick-questions">
                <h3>没想好问什么？高频问题点点看👆</h3>
                <div class="question-list">
                    <button class="question-btn">
                        <i class="fas fa-shield-virus"></i>
                        <span>过敏有哪些防治措施</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-heart"></i>
                        <span>血压多少算正常</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-running"></i>
                        <span>体检前要注意什么</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-medkit"></i>
                        <span>高血压需要终身服药吗</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-first-aid"></i>
                        <span>扭伤急救</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-band-aid"></i>
                        <span>烫伤紧急处理</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-stethoscope"></i>
                        <span>拉肚子怎么办</span>
                    </button>
                    <button class="question-btn">
                        <i class="fas fa-procedures"></i>
                        <span>发烧急处理</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部输入区域 -->
        <div class="input-container">
            <div class="input-group">
                <input type="text" placeholder="试试输入健康问题~">
                <button class="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>
    <script src="ai_health.js"></script>
</body>
</html> 